<template>
<scroll-view scroll-y class="address">
  <view class="number"> 
    <!-- 姓名 -->
    <view class="name">
    <text>姓名</text>
    <input type="text" v-model="newRes.receiver" placeholder="请输入收货人姓名">
    </view>
    <!-- 手机号码 -->
    <view class="telephone"> 
    <view class="name">
    <text>手机号码</text>
    <input type="text" v-model="newRes.contact" placeholder="请填写收货人手机号码">
    </view>
    </view>
    <!-- 省市区 -->
    <view class="location"> 
    <view class="name">
    <text>省/市/县 (区)</text>
    <input type="text" @tap="showCityPicker" v-model="newRes.fullLocation" placeholder="请选择地址">
    <mpvue-city-picker
        ref="mpvueCityPicker"
        :pickerValueDefault="pickerValueDefault"
        @onConfirm="onConfirm" 
      ></mpvue-city-picker>
    </view>
    </view>
    <!-- 详细地址 -->
    <view class="detailed"> 
    <view class="name">
    <text>详细地址</text>
    <input type="text" v-model="newRes.address" placeholder="街道、楼牌号信息">
    </view>
    </view>
    <!-- 默认地址 -->
     <view class="modification">  
    <view class="name">
    <view class="name-address">
      <text class="name-text">设置默认地址</text>
      <view>
        <u-switch  activeColor="#27ba9b" v-model="isDefault"></u-switch>
      </view>
    </view>
    </view>
    </view>
  </view>
  <button class="newbut" @click="preserve">{{difficult === true? "确定" : "保存"}}</button>

</scroll-view>
</template>

<script>
import mpvueCityPicker from "mpvue-citypicker";
export default {
  data(){
     return {
     cid:"", // id
     isDefault:false, // 默认地址
     newRes:{}, // 收货地址详情
     difficult:true, // 为真是修改,假为新建
      pickerValueDefault: [0, 0, 1], //省市区三级联动
      Province:"" // 省市区
    }
  },
  // computed:{
  //  yuanpi(){
  //     console.log(this.newRes,"ooo");
  //   return this.newRes?.isDefault === 1 ? true : false
  //   }, 
  // },
  components: {
    mpvueCityPicker,
  },
 onLoad(options){
  // console.log(options);
  this.cid = options.id
  this.difficult = options.isEdit
  options.isDefault == 1 ? this.value = true : this.value = false
  if(options.id){
   this.getMemberAddress() //数据回显
  }

uni.setNavigationBarTitle({
  title:options.title
})

 },
  methods:{
    // 新建收货地址
    async addMemberAddress(){
     await uni.$u.http.post("/member/address",this.newRes)
    //  console.log(res,"新建");
    },
  
    // 修改数据回显
   async getMemberAddress(){
     const res = await uni.$u.http.get(`/member/address/${this.cid}`)
    //  console.log(res,"数据");
    this.newRes = res.result
      // console.log(this.newRes,"00");
    this.yuanpi()
    },

  // 修改
    async updateMemberAddress(){
      this.newRes.isDefault = this.isDefault ? 1 : 0 //修改默认地址
     const res = await uni.$u.http.put(`/member/address/${this.cid}`,this.newRes)
    //  console.log(res,"修改");
     if(res.msg === "操作成功"){
       uni.navigateTo({
          url:"/pages/address/index"
       })
      uni.showToast({
        title:"修改成功",
        icon:"none"
      })
     }else{
      uni.showToast({
        title:"修改失败",
        icon:"none"
      })
     }
    },

    // 点击保存 校验
    preserve(){
      // console.log(this.newRes,"保存");
      // console.log(this.newRes.fullLocation,"999");
    this.Province = this.newRes.fullLocation
     if(this.receiver === ""){
      uni.showToast({
        title:"请填写收货人姓名",
        icon:"none"
      })
     }else if(this.contact === ""){
      uni.showToast({
        title:"请填写收货人手机号码",
        icon:"none"
      })
     }else if(this.address === ""){
      uni.showToast({
        title:"请填写详细收货地址",
        icon:"none"
      })
     }
     if(this.difficult){
      // console.log(this.newRes,"88");
      this.updateMemberAddress() //点击保存修改   
     }else{
      this.addMemberAddress() // 点击新建地址
     }
    },
    yuanpi(){
     this.newRes?.isDefault === 1 ? this.isDefault = true : this.isDefault=false
    }, 
    // 开关
    // change(){},
    // 省市区
    showCityPicker() {
      this.$refs.mpvueCityPicker.show();
    },
  
    onConfirm(e) {  // 点击确定
      // console.log(e);
      // const num1 = e.label.
     this.newRes.fullLocation =  e.label
    }
  }
}
</script>

<style lang="scss">
  .address {
  height: 100vh;
  padding: 20rpx;
  background-color: #f4f4f4;
  .number{
    padding: 0 20rpx;
    background-color: #fff;
  .name{
    display: flex;
    height: 81rpx;
    line-height: 81rpx;
    margin-right: 20rpx;
    padding: 15rpx;
    font-size: 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
  .name,text{
      width: 200rpx;
    }
  .name,input{
    height: 81rpx;
    line-height: 81rpx;
  }
  .name-address{
    display: flex;
    align-items: center;
    .name-text{
      margin-right: 350rpx;
    }
  }
  }
  }
  .newbut{
    width: 710rpx;
    height: 80rpx;
    background-color:#27ba9b;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #fff;
    margin: 30rpx 5rpx;
  }
  }
</style>